<template>
    <div>
        <el-card class="box-card">
            <div>
                <el-input size="small" @input="clearName" placeholder="村镇名称" v-model="info.name" class="input-with-select" style="width: 320px;">
                    <el-button slot="append" icon="el-icon-search" @click="findAllTenancyMessage"></el-button>
                </el-input>
                <el-button type="primary" size="small" style="margin: 20px;" @click="addFarm">新增</el-button>
            </div>
            <el-table ref="singleTable" v-loading="loading" :data="tableData"
                 border style="width: 100%">
                <el-table-column type="index" label="序号" width="50" align="center">
                </el-table-column>
                <el-table-column prop="name" label="村镇名称" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column  label="果园面积"  align="center">
                    <template slot-scope="scope">
                        <div>{{ scope.row.area}}{{ scope.row.areaUnit}}</div>
                    </template>
                </el-table-column>
                <el-table-column  label="挂果面积"  align="center">
                    <template slot-scope="scope">
                        <div>{{ scope.row.areaFruiting}}{{ scope.row.areaUnit}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="产量"  align="center">
                    <template slot-scope="scope">
                        <div>{{ scope.row.prodNum}}{{ scope.row.prodNumUnit}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="type" label="村镇类别"  align="center">
                </el-table-column>
                <el-table-column label="所属上级id"  align="center">
                    <template slot-scope="scope">
                        <div>{{ scope.row.parentId?scope.row.parentId:'-' }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间"  align="center">
                </el-table-column>
                <el-table-column align="center" label="操作"  fixed="right">
                    <template slot-scope="scope">
                        <el-button @click="editkRow(scope.row)" type="text" size="small">编辑</el-button>
                        <el-button @click="deletRow(scope.row.id)" type="text" size="small" style="color: red;">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="float: right;margin: 20px 0;"><el-pagination
                style="display: inline-block;"
                background
                    @current-change="handleCurrentChange"
                    :current-page.sync="info.page"
                    :page-size="info.pageNum"
                    layout="total, prev, pager, next"
                    :total="total">
                    </el-pagination></div>
        </el-card>
    </div>
</template>
<script>
import { findAllTenancyMessage,findIdMessage} from "@/request/supervisionCenterApi.js"
export default {
    data() {
        return {
            loading:false,
            tableData: [],
            info:{
                page:1,
                pageNum:10,
                name:""
            },
            total:0
        }
    },
    mounted() {
        this.findAllTenancyMessage()
    },
    methods: {
        async findAllTenancyMessage() {
            this.loading=true
            let res = await findAllTenancyMessage(this.info) 
            console.log(res)
            if (res.code != 200) return this.loading=false
            this.loading=false
            this.tableData = res.data.content
            this.total = res.data.totalElements
        },
        handleCurrentChange(val) {
          this.info.page = val;
          this.findAllTenancyMessage()
        },
        addFarm(){
            this.$router.push({
                path:"/townAdd"
            })
        },
        clearName(val){
                if(!val){
                    this.findAllTenancyMessage()
                }
        },
        deletRow(id){
            this.$confirm('是否删除该村镇?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(async () => {
                    let res= await findIdMessage(id)
                    this.findAllTenancyMessage()   
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                })
        },
        editkRow(row){
            this.$router.push({
                path:"/townAdd",
                query:{row:row}
            })
        } 
    }
}
</script>
<style lang="less" scoped>
.box-card {
    width: 100%;
    margin: 14px 0;
}
.lineTitle{
    width: 100%;
    padding: 5px 0;
    font-size: 16px;
    font-weight: 400;
    color: #01B780;
    background: rgba(1,183,128,0.08);
    text-align: center;
    margin-bottom: 20px;
}
/deep/.el-input__inner{
    background-color: #FAFAFA!important;
}
/deep/.el-textarea__inner{
    background-color: #FAFAFA!important;
}
/deep/.el-dialog__body{
    padding: 0!important;
    padding-bottom: 20px!important;
}
.el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>